<template>
    <div class="main">
      商户订单<input v-model="out_trade_no"><br>
      订单名称<input v-model="subject"><br>
      付款金额<input v-model="total_amount"><br>
      商品描述<input v-model="body"><br>
      <el-button v-on:click="pay" type="success" round>支付宝支付</el-button>
      <div ref="paymentContainer" v-html="paymentForm"></div>
    </div>
  </template>
  
  <script>
import { alipay } from '@/api/appointment'

export default {
  data() {
    return {
      out_trade_no: '',
      subject: '',
      total_amount: '',
      body: '',
      paymentForm: ''
    }
  },
  methods: {
    pay() {
      const data = {
        out_trade_no: this.out_trade_no,
        subject: this.subject,
        total_amount: this.total_amount,
        body: this.body
      }
      alipay(data).then(res => {
        if (res.code === 0) {
          this.paymentForm = res.data;
          this.$nextTick(() => {
            const form = this.$refs.paymentContainer.querySelector('form');
            if (form) {
              form.submit();
            }
          });
        } else {
          console.error('支付失败:', res.message);
        }
      }).catch(error => {
        console.error('请求错误:', error);
      });
    }
  }
}
</script>

  
